<template>
  <div class="addOrEditQueueBox">
    <breadcrumb
      :titleArr="titleArr"
      @back="backPage"
      class="bread-crumb"
    ></breadcrumb>
    <div class="queueBoxCont">
      <p class="title" style="margin-bottom: 16px">基础信息</p>
      <el-form
        class="m7-form baseInfo"
        :rules="baseInfoRule"
        size="mini"
        :model="baseInfoFrom"
        ref="baseInfoRuleFrom"
        label-position="top"
      >
        <el-form-item label="名称" prop="name">
          <el-input
            v-model="baseInfoFrom.name"
            :maxlength="20"
            placeholder="请输入"
            size="mini"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item label="负责人" prop="director">
          <el-select v-model="baseInfoFrom.director" placeholder="请选择" filterable>
            <el-option
              v-for="item in openUserList"
              :key="item._id"
              :label="item.agentName"
              :value="item._id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="说明" prop="description">
          <el-input
            type="textarea"
            :rows="4"
            v-model="baseInfoFrom.description"
            :maxlength="200"
            show-word-limit
            size="mini"
          ></el-input>
        </el-form-item>
      </el-form>
      <p class="title" style="margin-top: 40px">参数配置</p>
      <new-transfer
        filterable
        size="mini"
        :filter-method="filterMethod"
        :titles="['服务人员列表', '组内成员']"
        :button-texts="['移出', '加入']"
        filter-placeholder="请输入成员名称"
        v-model="baseInfoFrom.members"
        :data="agentListArr"
      >
      </new-transfer>
    </div>
    <div class="more-btn">
      <el-button class="cancel" size="mini" @click="backPage">取消</el-button>
      <el-button size="mini" type="primary" @click="saveFun">提交</el-button>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
import { commonAction, deepClone } from '@/utils/common'
import breadcrumb from '@/components/breadcrumb/breadcrumb.vue'
import { Form as ElForm } from 'element-ui'
import NewTransfer from '@/components/V7transfer/index.vue'
import { CommonModule } from '@/store/modules/common'
interface BaseInfoFromType {
  name: string
  director: string
  description: string
  members: any,
  id?: any
}
@Component({
  name: 'addOrEditQueue',
  components: {
    breadcrumb,
    NewTransfer
  }
})
export default class AddOrEditQueue extends Vue {
  @Prop({ default: [] }) private titleArr!: any

  private $message: any

  public chooseService: any = []

  private openUserList: any = [] // 启用的座席列表

  private baseInfoRule = {
    name: [{ required: true, trigger: 'blur', message: '请输入名称' }],
    director: [{ required: true, trigger: 'change', message: '请选择负责人' }]
  }

  public baseInfoFrom: BaseInfoFromType = {
    name: '',
    director: '',
    description: '',
    members: []
  }

  get agentListArr () {
    const agents = deepClone(CommonModule.publicCache.userListObj)
    const agentsArr: any = []
    for (const i in agents) {
      agentsArr.push({ key: agents[i]._id, label: agents[i].name })
    }
    return agentsArr
  }

  private filterMethod (query: any, item: any) {
    return item.label.indexOf(query) > -1
  }

  private backPage () {
    this.$emit('pageBack')
  }

  private saveFun () {
    const formRef = this.$refs.baseInfoRuleFrom as ElForm
    const { members, name, director, description, id } = this.baseInfoFrom
    const sendData = { members, name, director, description }
    const sendUpdateData = { ...sendData, id }
    const actionData = {
      url: id ? '/server-work/action/serviceGroup/update' : '/server-work/action/serviceGroup/create',
      method: 'post',
      data: id ? sendUpdateData : sendData
    }
    formRef.validate(valid => {
      if (valid) {
        commonAction(actionData).then(res => {
          if (res.success) {
            this.$message.success(`${id ? '更新' : '创建'}成功`)
            this.$emit('createSuc')
          }
        })
      }
    })
  }

  private mounted () {
    this.openUserList = deepClone(CommonModule.publicCache.userListEnable) || []
  }
}
</script>
<style lang="stylus" scoped>
.el-select
  width 100%
.addOrEditQueueBox
  border 1px solid $border-main
  border-radius 10px
  height calc(100vh - 86px)
  overflow auto
  box-shadow 0px 0px 4px 0px #e0e6f0,0px 1px 4px 0px #e0e6f0
.queueBoxCont
  margin 24px
  margin-bottom 60px
.title
  font-size 14px
  color $fc-gray2
  font-weight 600
  margin-bottom 20px
.baseInfo
  width 400px
.label
  float left
  width 65%
  overflow hidden
  text-overflow ellipsis
.transferIpt
  width 82px
  float right
  display none
.rightContent .transferIpt
  display block
.more-btn
  bottom -1px
  right 1px
  width 99%
  height 60px
  padding 0 16px
  line-height 48px
  text-align right
  position absolute
  background #fff
  z-index 20
  .cancel
    margin-right 10px
</style>
<style lang="stylus">
.addOrEditQueueBox
  .el-transfer__button
    display block
  .el-button+.el-button
    margin-left 0px
  .el-button [class*=el-icon-]+span
    margin-left 0px
  .el-transfer-panel
    width 300px
    .el-transfer-panel__header .el-checkbox .el-checkbox__label
      font-size 14px
    .el-form-item__label
      color #767e92
      font-size 12px
    .el-transfer-panel__item
      margin 10px 10px 10px 0px
    .el-transfer-panel__item.el-checkbox .el-checkbox__label
      font-size 12px
    .el-transfer__button i, .el-transfer__button span
      font-size 12px
  .el-tabs__nav-wrap::after
    //display none
  .el-transfer-panel__filter .el-input__inner
    padding-right 30px
    padding-left 20px
  .el-input__prefix
    left 235px
</style>
